<template>
  <div id="mydialog">
    <el-dialog :title="title" 
      :visible.sync="dialogFormVisible"
      :before-close="closeDialog">

      <div class="box">

        <div class="row">
          <el-row>
            <el-col :span="8">
              <div class="left">
                <bms-select v-model="codeDataSelect" :codeType="codeType"></bms-select>
              </div>
            </el-col>
            <el-col :span="16">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>BmsSelect使用说明</span>
                </div>
                <div v-text="htmlTips.selectText" class="html-content">
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>

        <div class="row">
          <el-row>
            <el-col :span="8">
              <div class="left">
                <bms-radio v-model="codeDataRadio" :codeType="codeType"></bms-radio>
              </div>
            </el-col>
            <el-col :span="16">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>BmsRadio使用说明</span>
                </div>
                <div v-text="htmlTips.selectRadio" class="html-content">
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>

        <div class="row">
          <el-row>
            <el-col :span="8">
              <div class="left">
                <bms-checkbox v-model="codeDataCheckBox" :codeType="codeType"></bms-checkbox>
              </div>
            </el-col>
            <el-col :span="16">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>BmsCheckbox使用说明</span>
                </div>
                <div v-text="htmlTips.selectCheckbox" class="html-content">
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>

    </el-dialog>
  </div>
</template>

<script>
import BmsSelect from '@/components/quick/ui/bms-select.vue'
import BmsRadio from '@/components/quick/ui/bms-radio.vue'
import BmsCheckbox from '@/components/quick/ui/bms-checkbox.vue'

export default {
  name: 'bms-codemodel-demo',
  components: { BmsSelect,BmsRadio,BmsCheckbox},
  data() {
    return {
      dialogFormVisible: false,
      title: "示例",
      codeType: '',
      codeDataSelect: '',
      codeDataRadio: '',
      codeDataCheckBox: [],
      htmlTips: {

      }
    }
  },
  methods: {
    closeDialog() {
      this.dialogFormVisible = false
    },
    receiveParent(row) {
      this.codeType = row.codeType
      this.dialogFormVisible = true
      this.htmlTips = {
        selectText : `<bms-select v-model="codeDataSelect" codeType="${this.codeType}"></bms-select>`,
        selectRadio : `<bms-select v-model="codeDataRadio" codeType="${this.codeType}"></bms-select>`,
        selectCheckbox : `<bms-select v-model="codeDataCheckbox" codeType="${this.codeType}"></bms-select>`
      }
    },
  },
  watch: {
    
  },
  created() {
  }
}
</script>

<style lang="scss" scoped>

.html-content {
  font: 16px;
  font-weight: bold;
  color: #3162bd;
}

.el-row >>> .el-col {
  margin: 0 20px;
}

.box {
  .row {
    margin-bottom: 50px;
    .left {
      margin: 0 20px;
    }
  }
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 16px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}



</style>